<template>
  <div>
    <label for="inputField">只能输入中文、大小写字母、数字和下划线：</label>
    <!-- <Input style="width: 200px" number id="inputField" v-model="inputValue" @input="validateInput" /> -->
    <InputNumber style="width: 200px" :max="10" :min="1" v-model="inputValue"></InputNumber>
    <br />
    <br />
    <br />
    平台：
    <Select @on-select="itemSelect" :max-tag-count="2" v-model="model10" multiple style="width: 200px">
      <Option v-for="item in cityList" :value="item.value" :key="item.value">
        {{ item.label }}
      </Option>
    </Select>
    子平台角色：
    <el-cascader
      v-model="value"
      style="width: 300px"
      :props="props"
      :options="options"
      :show-all-levels="false"
    ></el-cascader>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: [['pingtai', 'juese1']],
      props: { multiple: true },
      options: [
        {
          value: 'pingtai',
          label: '平台一',
          children: [
            {
              value: 'juese1',
              label: '角色一',
            },
            {
              value: 'juese2',
              label: '角色二',
            },
            {
              value: 'juese3',
              label: '角色三',
            },
          ],
        },
        {
          value: 'pingtai2',
          label: '平台二',
          children: [
            {
              value: 'juese3',
              label: '角色三',
            },
            {
              value: 'juese4',
              label: '角色四',
            },
          ],
        },
      ],
      inputValue: '',
      cityList: [
        {
          value: 'New York',
          label: '平台一',
        },
        {
          value: 'London',
          label: '平台二',
        },
      ],
      model10: [],
    }
  },
  watch: {
    value(val) {
      console.log('val', val)
    },
  },
  methods: {
    itemSelect(current) {
      console.log('current', current)
    },
    validateInput() {
      // 使用正则表达式验证输入值
      if (this.inputValue !== '_') {
        this.inputValue = this.inputValue.replace(/[^\u4e00-\u9fa5a-zA-Z0-9_]/g, '')
      }
    },
  },
}
</script>
